<template>
  <div class="map">
    <h3 class="title">世界疫情地图</h3>
    <div class="tab" style="margin-top: 20px">
      <el-radio-group v-model="radio1" size="small" @change="changeMap">
        <el-radio-button label="累计确诊"></el-radio-button>
        <el-radio-button label="现存确诊"></el-radio-button>
      </el-radio-group>
    </div>
    <div id="main" style="width:80vw;height:38vw;margin:0 auto;">
    </div>
  </div>
</template>

<script>
import { getStatisticsEarthAPI, getStatisticsChinaAPI } from '@/api/index'
export default {
  name: 'Map',
  data() {
    return {
      radio1: '累计确诊',
      arrGobal: [],
      arrNow: [],
      // 世界地图颜色区间
      pieces: [
        // 配置颜色区间
        {
          min: 0,
          max: 0,
          color: '#FFFFFF'
        },
        {
          min: 1,
          max: 4999,
          color: '#FDFDCF'
        },
        {
          min: 5000,
          max: 9999,
          color: '#FE9E83'
        },
        {
          min: 10000,
          max: 100000,
          label: '1万 - 10万',
          color: '#cc745c'
        },
        {
          min: 100000,
          max: 1000000,
          label: '10万 - 100万',
          color: '#9c513c'
        },
        {
          min: 1000000,
          max: 5000000,
          label: '100万 - 500万',
          color: '#61211b'
        },
        {
          min: 5000000,
          max: 10000000,
          label: '500万 - 1000万',
          color: '#3b0d09'
        },
        {
          min: 10000000,
          label: '>1000万',
          color: '#180402'
        }
      ]
    }
  },
  created() {
    this.confirm()
    this.ChinaMsg()
  },
  watch: {
    // 监听到arrGobal数组变化时，自动执行一次这个函数
    arrGobal: {
      handler() {
        this.setConfirm()
      }
    }
  },
  methods: {
    // 点击按钮改变地图数据
    changeMap(value) {
      if (value === '累计确诊') {
        this.setConfirm()
      } else if (value === '现存确诊') {
        this.setNowConfirm()
      }
    },
    // 请求各国累计和现存确诊疫情数据
    async confirm() {
      const { data: res } = await getStatisticsEarthAPI()
      const countries = res.data.WomAboard

      // 取出国家名和确诊数
      for (let i = 0; i < countries.length; i++) {
        const obj1 = {}
        const obj2 = {}
        // 存入累计信息
        obj1.name = countries[i].name
        obj1.value = countries[i].confirm
        this.arrGobal.push(obj1)

        // 存入现存信息
        obj2.name = countries[i].name
        obj2.value = countries[i].nowConfirm
        this.arrNow.push(obj2)
      }
    },
    // 请求中国累计和现存信息
    async ChinaMsg() {
      const { data: res } = await getStatisticsChinaAPI()
      const chinaMsg = res.data.diseaseh5Shelf.chinaTotal
      const obj1 = {}
      const obj2 = {}

      // 存入累计信息
      obj1.name = '中国'
      obj1.value = chinaMsg.confirm
      this.arrGobal.push(obj1)

      // 存入现存信息
      obj2.name = '中国'
      obj2.value = chinaMsg.nowConfirm
      this.arrNow.push(obj2)
    },

    // 将累计确诊数据渲染到页面上
    setConfirm() {
      const title = '累计确诊'
      // 将数据和地图显示位置传入echarts中
      this.$myChart.getWorldMap('main', this.arrGobal, title, this.pieces)
    },

    // 将现存确诊数据渲染到页面上
    setNowConfirm() {
      const title = '现存确诊'
      // 将数据和地图显示位置传入echarts中
      this.$myChart.getWorldMap('main', this.arrNow, title, this.pieces)
    }
  }
}
</script>

<style lang="less" scoped>
.map {
  position: relative;
  .tab {
    position: absolute;
    z-index: 1;
    color: #61211b;
  }
}
</style>
